<template>
    <div>
        <panel-head :route="route" />
        <!-- 列表 -->
        <el-table :data="tableData.list" style="width: 100%">
            <el-table-column prop="id" label="ID" />
            <el-table-column prop="name" label="昵称" />
            <el-table-column prop="permissions_id" label="所属组别">
                <template #default="scope">
                {{ permissionName(scope.row.permissions_id) }}
                </template>
            </el-table-column>
            <el-table-column prop="mobile" label="手机号" />
            <el-table-column prop="active" label="状态">
                <template #default="scope">
                    <el-tag :type="scope.row.active ? 'success' : 'danger'">{{
                        scope.row.active ? "正常" : "失效"
                    }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间">
                <template #default="scope">
                <div class="flex-box">
                    <el-icon style="margin-right: 10px"><Clock /></el-icon>
                    {{ scope.row.create_time }}
                </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button type="primary" @click="open(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination-info">
        <el-pagination
            v-model:current-page="paginationData.pageNum"
            v-model:page-size="paginationData.pageSize"
            :page-sizes="[10, 30, 50]"
            size="small"
            :background="false"
            layout="sizes, prev, pager, next, total"
            :total="tableData.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
        </div>

        <!-- 弹框 -->
        <el-dialog
            v-model="dialogFormVisible"
            @before-close="beforeClose"
            title="编辑用户"
            width="500"
        >
            <el-form
                ref="formRef"
                :model="form"
                label-width="100px"
                label-position="left"
                :rules="rules"
            >
                <el-form-item prop="mobile" label="手机号">
                    <el-input v-model="form.mobile" disabled />
                </el-form-item>
                <el-form-item prop="name" label="昵称">
                    <el-input v-model="form.name" placeholder="请填写昵称" />
                </el-form-item>
                <el-form-item prop="permissions_id" label="菜单权限">
                    <el-select
                        v-model="form.permissions_id"
                        placeholder="选择权限"
                        style="width: 240px"
                    >
                        <el-option
                            v-for="op in options"
                            :key="op.id"
                            :label="op.name"
                            :value="op.id"
                        />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="confirm(formRef)">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from "vue";
import { authAdmin, menuSelectList, updateUser } from "../../../api";
import dayjs from "dayjs";
import { useRoute } from "vue-router";

const route = useRoute()

const paginationData = reactive({
  pageNum: 1,
  pageSize: 10,
});

onMounted(() => {
  getAuthAdmin();
  menuSelectList().then(({ data }) => {
    console.log(data, "menuSelectList");
    options.value = data.data;
  });
});
// 获取用户数据
const getAuthAdmin = () => {
  authAdmin(paginationData).then(({ data }) => {
    console.log(data, "authAdmin");
    const { list, total } = data.data;
    list.forEach((item) => {
      item.create_time = dayjs(item.create_time).format("YYYY-MM-DD");
    });
    tableData.list = list;
    tableData.total = total;
  });
};

// 表格
const tableData = reactive({
  list: [],
  total: 0,
});

// 权限角色
const options = ref([]);
const permissionName = (id) => {
  const data = options.value.find((el) => el.id === id);
  return data ? data.name : "超级管理员";
};

// 分页
const handleSizeChange = (val) => {
  paginationData.pageSize = val;
  getAuthAdmin();
};
const handleCurrentChange = (val) => {
  paginationData.pageNum = val;
  getAuthAdmin();
};

// 弹框
const dialogFormVisible = ref(false);
const open = (rowdata={}) => {
    dialogFormVisible.value = true;
    // Object.assign(form,{name:rowdata.name, mobile:rowdata.mobile, permission_id: rowdata.permission_id})
    // 弹框打开是异步的
    nextTick(()=>{
        if(rowdata){
            Object.assign(form,{name:rowdata.name, mobile:rowdata.mobile, permission_id: rowdata.permission_id})
        }
    })
};
const beforeClose = () => {
  dialogFormVisible.value = false;
};

// 表单
const formRef = ref();
const form = reactive({
    name: "",
    mobile: "",
    permissions_id: 0,
});
const rules = reactive({
    name: [{ required: true, message: "请填写昵称", trigger: "blur" }],
    permissions_id: [{ required: true, message: "请填写权限", trigger: "blur" }],
});

// 提交表单
const confirm = async (formEl)=>{
    if(!formEl) return
    await formEl.validate((valid, fields)=>{
        if(valid){
            updateUser(form).then(({data})=>{
                if(data.code===10000){
                    beforeClose()
                    getAuthAdmin()
                }
            })
        }
        else{
            console.log('校验失败', fields)
        }
    })
}
</script>

<style lang="less" scoped>
.flex-box {
  display: flex;
  align-items: center;
}
.pagination-info {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>
